<template>
	<view class="container">
		<view class="wrapper">
			<!-- 头部 -->
			<view :class="headerClass">
				<view class="header_icon">
					<image src="../../static/qr.png"></image>
				</view>
				<view class="header_search">
					<view class="seach_icon">
						<image src="../../static/search.png" disabled="disabled"></image>
					</view>
					<view class="search_input">
						<input type="text" placeholder="请搜索宝贝名称" />
					</view>
				</view>
				<view class="header_icon">
					<view class="header_msg">
						<image src="../../static/msg.png"></image>
						<text></text>
					</view>
				</view>
			</view>
			<view class="header_background" :style="{backgroundColor:titleBackground}"></view>
			<view class="swiper_border"></view>
			<!-- 轮播图 -->
			<swiper :autoplay="true" :interval="3000" :duration="1000" @change="swiperDot">
				<swiper-item v-for="(item, index) in carouselList" :key="index">
					<image :src="item.imgUrl"></image>
				</swiper-item>
			</swiper>
			<!--指示器 -->
			<view class="swiper-dots">
				<text>{{carouseChange+1}}</text>
				<text>/</text>
				<text>{{carouseLength}}</text>
			</view>
		</view>
		<!-- 分类 -->
		<view class="order_section">
			<view v-for="(item,index) in classifyList" :key='index'>
				<image :src="item.imgUrl"></image>
				<text>{{item.title}}</text>
			</view>
		</view>
		<!-- 橱窗推荐 -->
		<view class="shop_window">
			<image src="../../static/bar-nav/h1.png"></image>
			<view class="title-box">
				<text class="deploy">橱窗推荐</text>
				<text class="tit">Shop Window</text>
			</view>
		</view>
		<view class="group-section">
			<swiper class="group-swiper" :duration="500">
				<swiper-item v-for="(item,index) in groupList" :key='index' v-if="(index)%2 == 0">
					<view class="group_content_left">
						<image :src="item.spuImg"></image>
						<view class="group_textBox">
							<text>{{item.spuTitle}}</text>
							<view class="group_price">
								<text>￥{{item.spuVipPrice/ 100}}</text>
								<text>￥{{item.spuOriginalPrice/ 100}}</text>
							</view>
							<view class="salesCount">
								<text>累计销售:{{item.spuSales}}件</text>
							</view>
						</view>
					</view>
					<view class="group_content_right">
						<view class="group_textBox">
							<text>{{groupList[index+1].spuTitle}}</text>
							<view class="group_price">
								<text>￥{{groupList[index+1].spuVipPrice/ 100}}</text>
								<text>￥{{groupList[index+1].spuOriginalPrice/ 100}}</text>
							</view>
							<view class="salesCount">
								<text>累计销售:{{groupList[index+1].spuSales}}件</text>
							</view>
						</view>
						<image :src="groupList[index+1].spuImg"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 分类精选 -->
		<view class="shop_window">
			<image src="../../static/bar-nav/h1.png"></image>
			<view class="title-box">
				<text class="deploy">分类精选</text>
				<text class="tit">Competitive Products For You</text>
			</view>
		</view>
		<view class="building-section" v-for="(item,index) in buildingList" :key='index'>
			<view class="building_image">
				<image :src="item.imgUrl"></image>
			</view>
			<scroll-view scroll-x>
				<view class="scroll-wrapper" v-for="(buItem,buIndex) in item.data">
					<view class="scroll_item">
						<image :src="buItem.img" mode=""></image>
						<text>{{buItem.title}}</text>
						<text>￥{{buItem.price/100}}</text>
					</view>
					<view class="more">
						<text>查看全部</text>
						<text>More+</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 热销宝贝 -->
		<view class="shop_window">
			<image src="../../static/bar-nav/h1.png"></image>
			<view class="title-box">
				<text class="deploy">热销宝贝</text>
				<text class="tit">Hot Sale</text>
			</view>
		</view>
		<view class="goods-section">
			<view class="goods_item" v-for="(item,index) in salesList" :key='index'>
				<!-- <view class="goods_images"> -->
				<image :src="item.img"></image>
				<!-- </view> -->
				<view class="goods_text">
					<text class="goods_title">{{item.title}}</text>
					<text>￥{{item.price/100}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				carouselList: [],
				carouseChange: 0,
				carouseLength: 0,
				titleBackground: '', //背景颜色
				classifyList: [],
				groupList: [],
				buildingList: [],
				salesList: [],
				headerClass:'header'
			}
		},
		onLoad() {
			let that = this
			uni.request({
				url: 'http://192.168.1.84:8081/m.api', //接口地址
				data: {
					'_gp': 'integral',
					'_mt': 'getIndexData'
				},
				method: 'GET',
				header: {
					'access_token': undefined
				},
				success: (res) => {
					console.log(res)
					that.carouselList = res.data.data.advertisement.t1
					that.carouseLength = res.data.data.advertisement.t1.length
					that.titleBackground = res.data.data.advertisement.t1[0].color
					that.classifyList = res.data.data.advertisement.t4
					that.groupList = res.data.data.windowRecommend
					that.buildingList = res.data.data.advertisement.t2
					that.salesList = res.data.data.salesTop
				}
			});
		},
		methods: {
			swiperDot(e) {
				const index = e.detail.current;
				this.carouseChange = index;
				this.titleBackground = this.carouselList[index].color;
			}
		},
		onPageScroll(e) {
			if (e.scrollTop >= '100') {
               this.headerClass = 'headerColor'
			}else{
				 this.headerClass = 'header'
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		// justify-content: center;
		background-color: #f5f5f5;
	}

	.wrapper {
		width: 100%;
		box-sizing: border-box;
		position: relative;

	}

	.header {
		width: 100%;
		height: 90upx;
		display: flex;
		position: fixed;
		top: 0;
		padding: 10upx;
		box-sizing: border-box;
		justify-content: space-between;
		color: rgb(0, 0, 0);
		z-index: 9999;
	}
.headerColor{
	width: 100%;
	height: 90upx;
	display: flex;
	position: fixed;
	top: 0;
	padding: 10upx;
	box-sizing: border-box;
	justify-content: space-between;
	color: rgb(0, 0, 0);
	z-index: 9999;
	background-color: #fff;
	transition: 1s;
	
}

	// .header view {
	// 	float: left;
	// }

	.header_icon {
		width: 65upx;
		height: 100%;
		display: flex;
		align-items: center
	}

	.header_icon image,
	.header_icon view {
		width: 80%;
		height: 75%;
		align-items: center;
	}

	.header_icon .header_msg {
		width: 100%;
		height: 100%;
		display: flex;
		// align-items: center
		position: relative;
	}

	.header_msg image {
		width: 80%;
		height: 75%;
		align-items: center;
		margin-left: 4upx;
		box-sizing: border-box;
	}

	.header_msg text {
		width: 24%;
		height: 24%;
		position: absolute;
		top: 2upx;
		right: 5upx;
		background-color: red;
		border-radius: 50upx;
	}

	 .header_search {
		border-radius: 32upx;
		background-color: rgba(231, 231, 231, 0.7);
		flex: 1;
		display: flex;
		position: relative;
		opacity: 1;
	}

	 .header_search view {
		float: left;
	}

	.header_search input {
		width: 100%;
		height: 100%;
		padding-left: 85upx;
		text-align: left;
		text-align: center;
		line-height: 90upx;
		font-size: 30upx;
	}

	.header_search image {
		width: 45upx;
		height: 45upx;
		position: absolute;
		top: 12upx;
		left: 140upx;
	}

	.header_background {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 460upx;
		transition: .4s;
		opacity: 0.5;
		// z-index: 998;
	}

	.swiper_border {
		position: absolute;
		top: 460upx;
		left: 0;
		width: 100%;
		height: 40upx;
		background-color: #f5f5f5;
	}

	.wrapper swiper {
		width: 100%;
		height: 400upx;
		position: relative;
		margin-top: 100upx;
		box-sizing: border-box;
		/* padding: 28upx; */
		// z-index: 999;

	}

	.wrapper swiper swiper-item {
		width: 100%;
		height: 100%;
		padding: 0 26upx;
		box-sizing: border-box;
	}

	.wrapper swiper swiper-item image {
		width: 100%;
		height: 100%;
		border-radius: 20upx;
		box-sizing: border-box;
	}

	.swiper-dots {
		left: 45upx;
		bottom: 40upx;
		// z-index: 999;
	}

	.swiper-dots {
		width: 72upx;
		height: 36upx;
		display: flex;
		background-image: url();
		background-size: 100% 100%;
		position: absolute;
		left: 60upx;
		bottom: 15upx;
	}

	.swiper-dots text {
		color: #fff;
		width: 36upx;
		height: 36upx;
		border-radius: 50upx;
		font-size: 24upx;
		text-align: center;
		line-height: 36upx;
	}

	.swiper-dots text:nth-child(2) {
		position: absolute;
		top: 0;
		left: 25%;
		line-height: 36upx;
		font-size: 22upx;
		color: #fff;

	}

	.order_section {
		width: 100%;
		height: 200upx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap: wrap;
		padding: 30upx 22upx;
		box-sizing: border-box;
		z-index: 5;
		// margin-top: 20upx;
		background-color: #fff;
	}

	.order_section view {
		font-size: 28upx;
		display: flex;
		flex-direction: column;
		align-items: center;

	}

	.order_section image {
		width: 88upx;
		height: 88upx;
		margin-bottom: 14upx;
		border-radius: 50%;
		opacity: .7;
		box-shadow: 4upx 4upx 20upx rgba(250, 67, 106, 0.3);
	}

	.shop_window {
		width: 100%;
		display: flex;
		align-items: center;
		height: 140upx;
		padding: 6upx 30upx 8upx;
		background: #fff;
		box-sizing: border-box;
		margin-top: 15upx;
	}

	.shop_window image {
		width: 80upx;
		height: 80upx;
		margin-right: 20upx;
	}

	.tit-box {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.deploy {
		display: flex;
		line-height: 1.3;
	}

	.tit {
		display: flex;
		color: #999999;
		font-size: 25upx;
	}

	.group-section {
		width: 100%;
		height: 626upx;
		background-color: #fff;
	}

	.group-section .group-swiper {
		height: 650upx;
		padding-bottom: 30upx;
	}

	.group_content_left {
		float: left;
		width: 55%;
		height: 100%;

	}



	.group_content_right {
		width: 45%;
		height: 100%;
		float: left;
	}

	.group_content_left image {
		width: 100%;
		height: 440upx;
	}

	.group_content_right image {
		width: 100%;
		height: 440upx;
	}

	.group_textBox {
		width: 100%;
		height: 160upx;
		font-size: 28upx;
		line-height: 1.6;
		padding: 20upx;
		box-sizing: border-box;
	}

	.group_textBox text {
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		display: inline-block;
	}

	.group_price text {
		display: inline;
	}

	.group_price text:nth-child(1) {
		color: red;
		margin-right: 10upx;
	}

	.group_price text:nth-child(2) {
		color: #999999;
		text-decoration: line-through;
		font-size: 26upx;
	}

	// 分类精选
	.building-section {
		width: 100%;
		overflow: hidden;
		margin-bottom: 20upx;
	}

	.building_image {
		width: 100%;
		height: 320upx;
		position: relative;
	}

	.building_image image {
		width: 100%;
		height: 100%;
	}

	scroll-view {
		white-space: nowrap;
		padding: 20upx;
		padding-right: 50upx;
		border-radius: 6upx;
		margin: -140upx 0 0 30upx;
		background: #fff;
		box-shadow: 1px 1px 5px #999999;
		position: relative;
		z-index: 1;
		box-sizing: border-box;
		height: 300upx;
	}

	.scroll-wrapper {
		display: flex;
		align-items: flex-start;
	}

	.scroll_item {
		width: 150upx;
		height: 150upx;
		box-sizing: border-box;
		margin-right: 20upx;

		line-height: 1.8;
	}

	.scroll_item image {
		width: 100%;
		height: 150upx;
		border-radius: 6upx;
		float: left;
	}

	.scroll_item text {
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		display: inline-block;
		float: left;
		font-size: 25upx;
	}

	.scroll_item text:nth-child(3) {
		color: red;
		font-size: 26upx;
	}

	.more {
		width: 180upx;
		height: 180upx;
		display: flex;
		text-align: center;
		justify-content: center;
		flex-direction: column;
		border-radius: 6upx;
		background: #f3f3f3;
		font-size: 29upx;
		color: #999999;

	}

	.more text:first-child {
		margin-bottom: 4upx;
	}

	// 热销宝贝
	.goods-section {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		// padding: 20upx;
		background: #fff;
		box-sizing: border-box;
	}

	.goods_item {
		width: 48%;
		display: flex;
		flex-direction: column;
		padding-bottom: 40upx;
		box-sizing: border-box;
		padding: 20upx;
	}

	.goods_item image {
		width: 100%;
		height: 330upx;
		opacity: 1;
	}

	.goods_item .goods_text {
		width: 100%;
		padding: 10upx;
		box-sizing: border-box;
		font-size: 28upx;
	}

	.goods_text text:nth-child(1) {
		width: 100%;
		display: inline-block;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.goods_text text:nth-child(2) {
		color: red;
	}
</style>
